<template>
  <div>
    <!--顶部搜索框start-->
    <div class="top-left">
      <input type="text" v-model="inputText" style="width:158%">
    </div>
    <div class="top-right">
      <button class="btn_search" @click="selectTotalGoods"><a>搜索</a></button>
    </div>
    <!--顶部搜索框end-->
    <!--首页轮播图-->
    <HomePictures v-show="checkShow"></HomePictures>
    <!--商品列表-->
    <div style="padding-bottom: 20px">
      <table v-for="good in GoodsList" @click="toGoodDetail(good)">
        <hr>
        <tr class="p"><img :src="good.gimg"></tr>
        <tr class="word">{{good.gname}}</tr>
        <tr class="num">¥ {{good.price}}</tr>
        <hr>
      </table>
    </div>
    <!--分页-->
    <div id="page">
      <button @click="changePage(0)">首页</button>
      <button @click="changePage(1)">上一页</button>
      <span>{{currentPage}}/{{totalPage}}</span>
      <button @click="changePage(2)">下一页</button>
      <button @click="changePage(3)">尾页</button>
      <select v-model="currentCount" @change="changeCurrentCount($event)" v-show="checkShow">
        <option v-for="index in currentCountList">{{index}}</option>
      </select>
    </div>
  </div>

</template>

<script>
  import HomePictures from '@/views/HomePictures'
  import {selectAllGoods, selectTotalGoodsCount} from '@/api/user'

  export default {
    name: 'HomePage',
    components: {HomePictures},
    data () {
      return {
        GoodsList: {},
        good: {
          gid: '',
          src: '',
          gname: '',
          price: '',
        },
        inputText: '', //搜索框中的文本值
        checkShow: true, //是否显示，默认为true
        currentPage: 1, //当前页码
        currentCount: 3, //定义每页显示条数，默认为3
        totalCount: 0, //总的在架商品的数量
        totalPage: 0, //总页码,
        currentCountList:[1,2,3,4,5],
      }
    },
    methods: {
      //查询全部商品
      selectTotalGoods () {
        //如果输入框中值为空，并且页码为1时，展示轮播图
        if (this.inputText === '' && this.currentPage === 1) {
          this.checkShow = true
        } else {
          this.checkShow = false
        }
        //如果输入框中的值不为空，重新查询与该名类似的商品的数量
        if (this.inputText !== '') {
          //调用查询全部在架商品的数量
          this.selectGoodsCount()
        }
        selectAllGoods({
          gName: this.inputText,  //输入框中的文本值
          currentPage: this.currentPage,  //当前页码
          currentCount: this.currentCount,  //每页显示的条数
        }).then((res) => {
          this.GoodsList = res.data.data
        }).catch(res => {
          alert('出错了，请重试')
        })
      },
      //跳转到商品详情页面，携带当前商品信息
      toGoodDetail (good) {
        this.$router.replace({
          path: '/GoodDetail',
          query: {
            good: good,
          }
        })
      },
      //查询全部在架商品的数量,如果输入框中内容为空，则查询全部，否则根据指定名字查询
      selectGoodsCount () {
        selectTotalGoodsCount({
          gName: this.inputText
        }).then((res) => {
          this.totalCount = res.data.data
          this.totalPage = Math.ceil(this.totalCount / this.currentCount)
        })
      },
      //分页改变页码
      changePage (num) {  //参数num为方法携带过来的值，0代表首页，1代表上一页，2代表下一页，3代表尾页
        if (num === 0) { //首页
          this.currentPage = 1
        } else if (num === 1 && this.currentPage !== 1) {   //上一页
          this.currentPage = this.currentPage - 1
        } else if (num === 2 && this.currentPage !== this.totalPage) {  //下一页
          this.currentPage = this.currentPage + 1
        } else if (num === 3) { //尾页
          this.currentPage = this.totalPage
        }
        //调用查询方法
        this.selectTotalGoods()
      },
      //改变一页显示的条数
      changeCurrentCount(event){
        this.currentCount=event.target.value; //获取option对应的value值;
        this.totalPage = Math.ceil(this.totalCount / this.currentCount)
        //调用查询方法
        this.selectTotalGoods()
      }
    },
    created () {
      //调用查询全部商品的方法
      this.selectTotalGoods()
      //调用查询全部在架商品的数量
      this.selectGoodsCount()
    }
  }
</script>

<style scoped>
  /* 相对位置 */
  tr {
    position: relative;
  }

  /* 图片宽度 */
  .p img {
    width: 20rem;
  }

  /* 字体行内元素 */
  .word {
    display: inline-block;
  }

  /* 数字 */
  .num {
    color: rgb(173, 10, 10);
    display: inline-block;
    margin-top: 5px;
    line-height: 40px;
    left: 10%;
    margin-bottom: 20px;
  }

  /* 左边搜索栏 */
  .top-left {
    position: fixed;
    top: 0;
    left: 2.5%;
    width: 50%;
  }

  /* 右边搜索按钮 */
  .top-right {
    position: fixed;
    top: 0;
    left: 85%;
  }

  /* 搜索按钮  */
  .btn_search {
    background: rgb(240, 235, 235);
    margin-top: 2.5%;
    height: 24px;
    color: rgb(212, 87, 87);
    border: 1px solid rgb(231, 227, 227);
  }

  /* 搜索按钮颜色的改变 */
  a:active {
    color: rgb(27, 27, 139);
  }

  /* 分页div */
  #page {
    padding-bottom: 60px;
  }
</style>
